<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" name="" id="url"><button>提交</button>
        <img id="img1" src="" alt="">
        <input id="img" type="file">
        <textarea id="base" name="" id="" cols="30" rows="10"></textarea>
    </body>
    <script>
    function ImgToBase64(file, maxLen, callBack) {
        var img = new Image();

        var reader = new FileReader();//读取客户端上的文件
        reader.onload = function () {
            var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
            img.src = url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
        };
        img.onload = function () {
            //生成比例
            var width = img.width, height = img.height;
            //计算缩放比例
            var rate = 1;
            if (width >= height) {
                if (width > maxLen) {
                    rate = maxLen / width;
                }
            } else {
                if (height > maxLen) {
                    rate = maxLen / height;
                }
            };
            img.width = width * rate;
            img.height = height * rate;
            //生成canvas
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var base64 = canvas.toDataURL('image/jpeg', 0.9);
            callBack(base64);
        };
        reader.readAsDataURL(file);
    }
    $(function () {
        $("button").click(function(){
            $.ajax({
                url: "https://api.tinify.com/shrink",
                headers : {'Authorization':'Basic 14okseRMhxQgC8G4RVoQeNwUzlAUhOXt'},
                type: "POST",
                data: {
                    source: {
                        url: "https://boyzhaotian.netlify.com/wz.png"
                    }
                }
            })
        })
        $("#img").change(function () {
            var file = $(this)[0].files[0];//获取input file控件选择的文件
            
            ImgToBase64(file, 720, function (base64) {
                $("#img1")[0].src = base64;//预览页面上预留一个img元素，载入base64
                $("#img1")[0].width = 300;//设定宽高，不然会自动按照压缩过的图片宽高设定，有可能超出预想的范围。
　　　　　　　　　　　//直接利用ajax上传base64到服务器，完毕
                $("#base").text(base64)
            });
        })
    })
    </script>
</html>